document.addEventListener('DOMContentLoaded', () => {
    const loginForm = document.getElementById('loginForm');
    const togglePasswordBtn = document.querySelector('.toggle-password');
    const passwordInput = document.getElementById('password');
    
    // 密码显示/隐藏切换
    togglePasswordBtn.addEventListener('click', () => {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        togglePasswordBtn.querySelector('i').className = `fas fa-${type === 'password' ? 'eye' : 'eye-slash'}`;
    });
    
    // 记住用户名功能
    const rememberCheckbox = document.getElementById('remember');
    const username = document.getElementById('username');
    
    // 页面加载时检查是否有保存的用户名
    if (localStorage.getItem('rememberedUsername')) {
        username.value = localStorage.getItem('rememberedUsername');
        rememberCheckbox.checked = true;
    }
    
    loginForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        // 获取输入值
        const usernameValue = username.value;
        const password = passwordInput.value;
        
        // 移除之前的错误提示
        removeErrorMessage();
        
        // 验证用户名和密码
        if (usernameValue === 'admin' && password === 'admin') {
            // 记住用户名
            if (rememberCheckbox.checked) {
                localStorage.setItem('rememberedUsername', usernameValue);
            } else {
                localStorage.removeItem('rememberedUsername');
            }
            
            // 登录成功
            showSuccessMessage();
            
            // 禁用表单
            disableForm();
            
            // 延迟跳转到主页
            setTimeout(() => {
                window.location.href = 'index.html';
            }, 1000);
        } else {
            // 登录失败
            showErrorMessage('用户名或密码错误');
        }
    });
    
    // 显示错误信息
    function showErrorMessage(message) {
        const formGroup = document.querySelector('.form-group:last-child');
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-message';
        errorDiv.innerHTML = `
            <i class="fas fa-exclamation-circle"></i>
            ${message}
        `;
        formGroup.insertBefore(errorDiv, formGroup.lastChild);
        
        // 添加抖动效果
        loginForm.classList.add('shake');
        setTimeout(() => {
            loginForm.classList.remove('shake');
        }, 500);
    }
    
    // 显示成功信息
    function showSuccessMessage() {
        const formGroup = document.querySelector('.form-group:last-child');
        const successDiv = document.createElement('div');
        successDiv.className = 'success-message';
        successDiv.innerHTML = `
            <i class="fas fa-check-circle"></i>
            登录成功，正在跳转...
        `;
        formGroup.insertBefore(successDiv, formGroup.lastChild);
    }
    
    // 移除错误信息
    function removeErrorMessage() {
        const errorMessage = document.querySelector('.error-message');
        if (errorMessage) {
            errorMessage.remove();
        }
        const successMessage = document.querySelector('.success-message');
        if (successMessage) {
            successMessage.remove();
        }
    }
    
    // 禁用表单
    function disableForm() {
        const inputs = loginForm.querySelectorAll('input');
        const button = loginForm.querySelector('button[type="submit"]');
        inputs.forEach(input => input.disabled = true);
        button.disabled = true;
    }
    
    // 添加输入框聚焦效果
    const inputs = document.querySelectorAll('input');
    inputs.forEach(input => {
        const wrapper = input.closest('.input-wrapper');
        
        input.addEventListener('focus', () => {
            wrapper.classList.add('focused');
        });
        
        input.addEventListener('blur', () => {
            if (!input.value) {
                wrapper.classList.remove('focused');
            }
        });
        
        // 如果输入框有值,添加focused类
        if (input.value) {
            wrapper.classList.add('focused');
        }
    });
    
    // 添加按钮点击波纹效果
    const loginBtn = document.querySelector('.login-btn');
    loginBtn.addEventListener('click', function(e) {
        const ripple = document.createElement('div');
        ripple.className = 'btn-hover-effect';
        this.appendChild(ripple);
        
        setTimeout(() => {
            ripple.remove();
        }, 1000);
    });
}); 